bc
<template>
	<!-- 采购录单 -->
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<view class="mt20">
				<u-section class="mb12" title="选配商品" :right="false" :show-line="true"></u-section>
			</view>
			<view class="sort-info">
				<view class="info-item" v-for="item in commodityList" :key="item.id" >
					<view class="info-image">
						<image :src="api_root2 + item.info.image" mode="aspectFill"
							style="width:150rpx;height: 150rpx;"></image>
					</view>
					<view class="info-data">
						<view class="info-title">
							<text>{{item.info.name}}</text>
							<!-- 321<text>{{api_root2 + item.info.image}}</text> -->
						</view>
						<view class="info-specifications">
							<view>
								单价：{{ item.price }}
							</view>
							<view>
								单位/{{ item.info.unit }}
							</view>
						</view>
						<view class="info-number">
							<view>
								规格：{{ item.info.specification }}
							</view>
							<view>
								
							</view>
							<view>
								库存{{ item.info.inventory }}
							</view>
						</view>
						

					</view>
				</view>
			</view>
		</u-form>
		<u-calendar max-date="2050-01-01" v-model="delivery_timeSheetShow" mode="date" @change="delivery_timeChange"
			toolTip='交货时间'></u-calendar>
		<u-select mode="single-column" :list="customerSelectList" v-model="customerSheetShow"
			@confirm="selectConfirm"></u-select>

		<u-select mode="single-column" :list="typelist" v-model="typelistShow" @confirm="selecttypelistConfirm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
var _this;
export default {
	data() {
		return {
			api_root2: '',
			model: {
				customer: '',
				name: '',
				linkman: '',
				address: '',
				city: '',
				remark: '',
				phone: '',
				telephone: '',
				type: '',
				delivery_time: '', //交货日期
				rate: '16',
			},
			form: {
				sell_id: -1,
				product: []
			},
			rules: {
				rate: [{
					required: true,
					message: '请输入税率',
					trigger: 'blur',
				},],
				name: [{
					required: true,
					message: '请输入名称',
					trigger: 'blur',
				}],
				// linkman: [{
				// 	required: true,
				// 	message: '请输入联系人',
				// 	trigger: 'blur',
				// }],
				city: [{
					required: true,
					message: '请选择地区',
					trigger: 'change',
				}],
				type: [{
					required: true,
					message: '请选择仓库类型',
					trigger: 'change',
				}],
				telephone: [{
					required: true,
					message: '请输入座机号码',
					trigger: ['change', 'blur'],
				},
				{
					validator: (rule, value, callback) => {
						// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
						return this.$u.test.mobile(value);
					},
					message: '座机号码不正确',
					// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					trigger: ['change', 'blur'],
				}
				],
			},
			pickerShow: false,
			border: false,
			errorType: ['message'],
			labelPosition: 'left',
			unitList: [],
			unitListShow: false,

			customerSheetShow: false,
			customerList: {}, //供应商列表
			customerSelectList: [], //待选供应商列表
			customerSelectindex: 0, //选择的供应商索引

			delivery_timeSheetShow: false,
			delivery_timetime: null,

			/* 卡片 订单列表 */
			commodityList: [],


			/* 类型 交货方式:1=买家自提,2=卖方发货,3=代发*/
			typelistShow: false,
			typelist: [{
				label: '买家自提',
				value: 0,
			}, {
				label: '卖家发货',
				value: 1,
			}, {
				label: '代发',
				value: 2,
			}],
			typelistIndex: 0,
		}

	},
	computed: {
		totalMoney() {
			var totalMoney = 0
			for (let i = 0; i < this.commodityList.length; i++) {
				totalMoney += this.commodityList[i].num * this.commodityList[i].money
			}
			totalMoney = totalMoney + totalMoney * _this.model.rate / 100
			return totalMoney.toFixed(2);
		}
	},
	onShow() {
		var list = uni.getStorageSync('commodityList');
		console.log('%c [ list ]-234', 'font-size:13px; background:pink; color:#bf2c9f;', list)
		if (list) {
			console.log('%c [ this.commodityList ]-254', 'font-size:13px; background:pink; color:#bf2c9f;', this.commodityList)
			this.commodityList = [...this.commodityList, ...list]//合并 本地存储和 web请求到的数据到同一个数组并且去重
			console.log('%c [ this.commodityList ]-254', 'font-size:13px; background:pink; color:#bf2c9f;', this.commodityList)
			let uniqueArray = this.removeDuplicates(this.commodityList);//去重
			// this.form.product = uniqueArray;
			this.commodityList = uniqueArray;
			console.log('%c [ this.form.product ]-270', 'font-size:13px; background:pink; color:#bf2c9f;', this.form.product)
		}

		uni.removeStorageSync('commodityList')

	},
	onLoad(opt) {
		_this = this;
		_this.getcustomerList()
		_this.api_root2 = _this.api_root.replace(/\/$/, '');
		this.form.sell_id = opt.id;//销售单id
		this.getSelectList()//获取选配列表

	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		removeDuplicates(array) {
			const seen = new Set();
			return array.filter(item => {
				if (seen.has(item.id)) {
					return false;
				} else {
					seen.add(item.id);
					return true;
				}
			});
		},

		getSelectList() {//获取选配列表
			this._post_form('api/ykjp/sell/Sell/getSelectList', { id: this.form.sell_id }, (res) => {
				console.log('%c [ res ]-302', 'font-size:13px; background:pink; color:#bf2c9f;', res)
				let form = res.data.data.map((item, index) => {
					return Object.assign({}, {
						money: item.price,
						id: item.id,//转字符串
						name: item.info.name,
						num: item.nums,
						remark: item.remarks,
						unit: item.unit,
						inventory: item.info.inventory,
						id: item.id,
						max_warning: item.info.max_warning,
						min_warning: item.info.min_warning,
						product_type_id: item.info.product_type_id,
						product_unit_id: item.info.product_unit_id,
						prop: item.info.prop,
						raise: item.info.raise,
						sku: item.info.sku,
						specification: item.info.specification,
						updatetime: item.info.updatetime,
					})
				})

				console.log('%c [ form ]-288', 'font-size:13px; background:pink; color:#bf2c9f;', form)

				// this.commodityList = form
				this.commodityList = res.data.data
			})
		},
		getcustomerList() {
			_this._post_form('/api/ykjp/information/basisinfo/customerinfo/index', {}, (result) => {
				_this.customerSelectList = [];
				for (let i = 0; i < result.data.data.length; i++) {
					_this.customerSelectList.push({
						label: result.data.data[i].name,
						value: i,
					})
				}
				_this.setData({
					'customerList': result.data.data
				})
			});
		},
		submit() {
			console.log('%c [ this.commodityList ]-339', 'font-size:13px; background:pink; color:#bf2c9f;', this.commodityList)

			let form = this.commodityList.map((item, index) => {//传输的数据
				return Object.assign({}, {
					product_price: item.money,
					product_id: item.id,//转字符串
					product_name: item.name,
					product_nums: item.num,
					product_remarks: item.remark,
					product_unit: item.unit
				})
			})
			console.log('%c [ form ]-269', 'font-size:13px; background:pink; color:#bf2c9f;', form)
			this.form.product = form

			// this.form.product.forEach((item, index) => {
			// 	item.product_remarks = _this.commodityList[index].remark
			// })
			console.log('%c [ this.form ]-283', 'font-size:13px; background:pink; color:#bf2c9f;', this.form)
			if (this.form.product.length > 0) {
				console.log('进来了');
				this._post_json('api/ykjp/sell/Sell/selectProduct', this.form, (res) => {
					console.log('%c [ res ]-313', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					if (res.code == 1) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})

						this.getSelectList()//刷新
					}
				})
			}
		},
		sendInfo() {
			let data = {};
			data.customer_info_id = _this.customerList[_this.customerSelectindex].id; //客户id
			data.customer_name = _this.customerList[_this.customerSelectindex].name; //客户
			data.linkman = _this.customerList[_this.customerSelectindex].name; //联系人
			data.phone = _this.model.phone; //电话
			data.delivery_time = _this.delivery_timetime; //交货时间
			data.type = _this.typelistIndex + 1; //类型


			let wait_nums = 0;
			let totalMoney, money = 0

			data.product_id = [];
			data.product_price = [];
			data.product_nums = [];
			data.product_remarks = [];
			data.product_unit = [];
			data.product_wait_nums = [];
			data.product_length = _this.commodityList.length;

			for (let i = 0; i < _this.commodityList.length; i++) {
				wait_nums += _this.commodityList[i].num * 1;
				money += _this.commodityList[i].num * _this.commodityList[i].money

				data.product_id.push(_this.commodityList[i].id)
				data.product_price.push(_this.commodityList[i].money)
				data.product_nums.push(_this.commodityList[i].num)
				data.product_remarks.push(_this.commodityList[i].remark)
				data.product_unit.push(_this.commodityList[i].unit)
				data.product_wait_nums.push(_this.commodityList[i].num)
			}

			totalMoney = money + money * _this.model.rate / 100

			data.wait_nums = wait_nums; //未生成录库单数
			data.total_nums = wait_nums; //产品总数

			data.city = _this.customerList[_this.customerSelectindex].city;
			data.address = _this.customerList[_this.customerSelectindex].address;
			data.rate = _this.model.rate; //税率

			data.real_money = money; //金额
			data.theory_money = totalMoney.toFixed(2); //加上税务金额
			data.status = 0;
			data.admin_id = 1;
			data.remark = _this.model.remark;
			data.storage_status = 0;
			console.log(data);
			_this._post_form('/api/ykjp/sell/sell/addSell', data, (result) => {
				_this.$refs.uToast.show({
					title: '添加成功',
					type: 'success'
				})
				setTimeout(function () {
					uni.navigateBack()
				}, 1000);
			});
		},
		// 选择地区回调
		regionConfirm(e) {
			this.model.city = e.province.label + '/' + e.city.label + '/' + e.area.label;
		},
		// 供应商回调
		selectConfirm(e) {
			e.map((val, index) => {
				this.model.customer = val.label;
				this.customerSelectindex = val.value;
				this.model.linkman = this.customerList[this.customerSelectindex].contact;
				this.model.phone = this.customerList[this.customerSelectindex].phone;
				this.model.address = this.customerList[this.customerSelectindex].address;
			})
		},

		/* 选择类型回调 */
		selecttypelistConfirm(e) {
			e.map((val, index) => {
				this.typelistIndex = val.value;
			})
		},
		/* 选择日期回调 */
		delivery_timeChange(e) {
			_this.model.delivery_time = e.result
			_this.delivery_timetime = _this.toTimeData(e.result) / 1000
		},
		onAddOrder(e) {
			uni.navigateTo({
				url: 'addsell'
			})
		},
		ondelOrder(index) {
			_this.commodityList.splice(index, index + 1)
		}

	}
}
</script>


<style scoped lang="scss">
.sort-info {
	width: 100%;
	// display: flex;
	// flex-wrap: wrap;
	// justify-content: space-between;

	.info-item {
		display: flex;
		width: 100%;
		height: 200rpx;
		border-bottom: 1px solid #F4F5F7;
		padding-top: 20rpx;
		padding-left: 10rpx;
		margin-bottom: 5upx;
		background-color: #fff;

		.info-image {
			width: 150upx;
		}

		.info-data {
			padding: 10upx 20upx;
			width: 100%;

			.info-title {
				font-size: 26upx;
				font-weight: 700;
				color: #333;
			}

			.info-specifications {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 22upx;
				color: #666;
				margin-top: 10upx;
			}

			.info-number {

				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 22upx;
				color: #666;
				margin-top: 10upx;
			}
		}
	}
}
.wrap {
	padding: 30rpx;
	background-color: #fff;
}

.title-wrap {
	display: inline-block;
}

.title {
	text-align: left;
	font-size: 28rpx;
	color: $u-content-color;
	margin-top: 20rpx;
}

.ucard {
	background-color: #eaffe5;
}
</style>
